.login{
    width: 100%;
    height: 100vh;
    background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091300%2Fatxfffpesxzatxfffpesxz.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650523240&t=5faea3cc39797840dd15618c71438ee5");
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    display: flex;

    .login-left{
        width: 25%;
        background-color: rgba($color: rgb(48, 47, 47), $alpha: 1);
        
        .title-left{
            color: white;
            text-align: center;
            margin-top: 25px;
            font-weight: 550;
        }
    }
    ::v-deep .el-tree{
        color: rgb(206, 207, 211);
        width: 60%;
        margin: 60px auto;
        background-color: rgba($color: rgb(8, 8, 8), $alpha: 0);
    }

    .login-right{
        width: 83%;

        ::v-deep .el-button--default{
            width: 22px;
            font-size: 27px;
            background: rgba($color: #fff, $alpha: 0);
            color: white;
            border: none;
        }
        ::v-deep .el-button--default :hover{
            color: #5dd5c8;
        }
        ::v-deep .el-drawer{
            background-color: rgb(56, 55, 55);
            color: rgb(212, 209, 209);

            .drawer-item{
                display: flex;
                align-items: center;
                padding: 20px 0 20px 0 ;
                border-bottom: 1px solid #656666;

                .item-left{
                    flex:1;
                }
                .item-right{
                    flex:4.5;
            
                    .item-right-top{
                        display: flex;
                        justify-content: space-between;
                       
                        .message-title, .date{
                            margin-top: 5px;
                        }  
                    }   
                }
            }
     
            .null{
                text-align: center;
                margin-top: 20px;
            }
            
        }
        ::v-deep .el-drawer__body{
            padding: 0 20px 0 20px;
        }
        ::v-deep .el-drawer__header{
            color: rgb(230, 230, 230);
            font-weight: 550;
            font-size: 20px;
        }

            .title{
                color: rgb(204, 199, 199);
                text-align: center;
            }
            .tab{
                display: flex;
                justify-content: space-between;
                width: 35%;
                margin: 30px auto;
                color: grey; 
                .tab-item{
                    height: 30px;
                    flex: 1;
                    text-align: center;
                }
            }
            .active{
                color: white;
                border-bottom: 1px solid rgb(44, 99, 250);
            }

            .loginBox{
                width: 500px;
                height: 400px;
                background-color: rgba($color: rgb(12, 11, 11), $alpha: 0.8);
                border-radius: 10px 10px 10px 10px;
                padding-top: 30px;
                position: relative;
                top: 20%;
                left: 35%;
        
                ::v-deep .demo-ruleForm{
                    width: 400px;
                    margin-top: 30px;
                }
        
                ::v-deep .el-form-item__label{
                    color: white;
                    font-size: 16px;
                }
        
                ::v-deep .el-input__inner{
                    color: white;
                    background-color: rgba($color: #fff, $alpha: 0.3);
                    margin-bottom: 10px;
                    font-size: 16px;
                }
        
                ::v-deep .el-button{
                    width: 100%;
                }
            }
    }
}